<template>
  <div>
    <input v-model="num.current" step="20" type="number" />
    <div>{{ num.tweenedNumber.toFixed(0) }}</div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import gsap from "gsap";

const num = ref({
  current: 0,
  tweenedNumber: 0,
});

watch(
  () => num.value.current,
  (newVal, _oldVal) => {
    gsap.to(num.value, {
      duration: 1,
      tweenedNumber: newVal,
    });
  }
);
</script>

<style scoped></style>
